<!-- 表单子表组件 2024.11.14 -->

<template>
  <t-space direction="vertical" size="small" style="width: 100%">
    <t-space size="small" :breakLine="true" v-if="Array.isArray(buttons) && buttons.length > 0">
      <t-button
        v-for="item in buttons"
        :key="item"
        :size="item.size || 'medium'"
        :theme="item.theme || 'primary'"
        :disabled="item.disabled || false"
        @click="item.click"
      >
        <template v-if="item.icon" #icon>
          <t-icon :name="item.icon" />
        </template>
        {{ item.name }}
      </t-button>
    </t-space>

    <t-space v-if="$slots.operations" size="small" style="width: 100%">
      <slot name="operations"></slot>
    </t-space>

    <t-enhanced-table
      size="small"
      ref="formTableRef"
      :row-key="rowKey || 'id'"
      activeRowType="single"
      :data="tableData"
      :columns="tableColumns"
      :max-height="tableMaxHeight || '40vh'"
      :foot-data="footData"
      :row-selection-type="rowSelectionType || 'multiple'"
      @select-change="handleSelectChange"
      @row-dblclick="handleRowDbClick"
      select-on-row-click
      :pagination="
        pagination ? { ...pagination, pageSizeOptions: [5, 10, 20, 50, 100, 500, 1000, 2000, 5000, 10000] } : undefined
      "
      :row-selection-allow-uncheck="true"
      :tree="tableTreeOptions"
      @page-change="handlePageChange"
      :scroll="scroll || { type: 'virtual' }"
      table-layout="fixed"
      tableContentWidth="100%"
      bordered
      lazy-load
    >
      <template v-if="$slots.rowOperations" #operation="{ row }">
        <slot name="rowOperations" :row="row"></slot>
      </template>
    </t-enhanced-table>
  </t-space>
</template>

<script lang="tsx" setup>
import { computed, ref, useSlots, watch } from "vue";
import { type TableProps } from "tdesign-vue-next";

const slots = useSlots();

const props = defineProps([
  "mode",
  "buttons",
  "rowKey",
  "columns",
  "treeOptions",
  "tableData",
  "tableMaxHeight",
  "showOperations",
  "rowSelectionType",
  "scroll",
  "pagination",
  "rowOpWidth",
  "footData"
]);

const emits = defineEmits(["currentChange", "pageChange", "rowDbClick"]);

const formTableRef = ref();

const tableColumns = computed(() => {
  const rowOperationColumn: TableProps["columns"] = [
    { colKey: "operation", title: "操作", width: props.rowOpWidth || 150, fixed: "right" }
  ];

  return [
    {
      colKey: "row-select",
      label: "选择",
      title: "选择",
      type: props.rowSelectionType || "multiple",
      width: 60,
      fixed: "left"
    },
    {
      colKey: "serial-number",
      title: "序号",
      align: "center",
      width: 70,
      fixed: "left"
    },
    ...props.columns,
    ...(slots.rowOperations ? rowOperationColumn : [])
  ] as TableProps["columns"];
});

const tableTreeOptions = computed(() => {
  if (props.mode === "tree") {
    if (props.treeOptions) {
      return props.treeOptions;
    } else {
      return { childrenKey: "children", treeNodeColumnIndex: 2 };
    }
  } else {
    return undefined;
  }
});

const handleSelectChange = (keys: Array<Number | String>, options: Record<string, any>) => {
  const emitData = {
    keys,
    options
  };
  emits("currentChange", emitData);
};

const handlePageChange = (pageInfo: Record<string, any>, newDataSource: Record<string, any>) => {
  emits("pageChange", pageInfo, newDataSource);
};

const handleRowDbClick = (context: Record<string, any>) => {
  emits("rowDbClick", context);
};

//
watch(
  () => props.tableData,
  () => {
    // 当 tableData 发生变化时，调用 formTableRef.value.resetData() 来刷新表格
    // console.log(formTableRef.value);
    formTableRef.value.refreshTable();
  },
  {
    deep: true,
    flush: "post"
  }
);
</script>
